<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日志系统</title>
    <link rel="stylesheet" href="../styles/styles-main.css">
    <link rel="stylesheet" href="../styles/modules.css">
    <link rel="stylesheet" href="../styles/layout-optimization.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="../modules/module-loader.js"></script>
    <script src="../modules/core-modules.js"></script>
    <script>
        // 动态加载日志管理所需模块
        document.addEventListener('DOMContentLoaded', async function() {
            try {
                await moduleLoader.loadModules([
                    ['api-client', '../scripts/api-client.js'],
                    ['navbar-main', '../scripts/navbar-main.js'],
                    ['sidebar-manager', '../scripts/sidebar-manager.js'],
                    ['logs', '../scripts/logs.js'],
                    ['logs-enhanced', '../scripts/logs-enhanced.js']
                ]);
                
                // 初始化日志管理
                if (typeof LogsManager !== 'undefined') {
                    const logsManager = new LogsManager();
                    logsManager.init();
                }
            } catch (error) {
                console.error('模块加载失败:', error);
            }
        });
    </script>
    <style>
        /* 日志页面特定样式 */
        .logs-container {
            max-width: 1400px;
            margin: 0 auto;
            width: 100%;
        }

        h1 {
            color: #2c3e50;
            margin-bottom: 30px;
            font-size: 28px;
            font-weight: 600;
        }

        /* 筛选栏样式 */
        .logs-filter-bar {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .filter-row {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }

        .filter-group {
            flex: 1;
            min-width: 200px;
        }

        .filter-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #2c3e50;
        }

        .filter-group select,
        .filter-group input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            font-size: 14px;
        }

        .filter-group input[type="datetime-local"] {
            padding: 7px 12px;
        }

        .quick-date-buttons {
            display: flex;
            gap: 10px;
            margin-top: 5px;
        }

        .quick-date-btn {
            padding: 4px 8px;
            border: 1px solid #dcdfe6;
            background: white;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
        }

        .quick-date-btn.active {
            background: #3498db;
            color: white;
            border-color: #3498db;
        }

        .filter-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            margin-top: 10px;
        }

        /* 日志类型标签 */
        .logs-tabs {
            display: flex;
            background: white;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .log-tab {
            flex: 1;
            text-align: center;
            padding: 15px;
            cursor: pointer;
            border-right: 1px solid #f0f0f0;
            transition: all 0.3s ease;
        }

        .log-tab:last-child {
            border-right: none;
        }

        .log-tab.active {
            background: #3498db;
            color: white;
        }

        .log-tab:hover:not(.active) {
            background: #f8f9fa;
        }

        .tab-badge {
            background: #e74c3c;
            color: white;
            border-radius: 10px;
            padding: 2px 6px;
            font-size: 12px;
            margin-left: 5px;
        }

        /* 日志列表 */
        .logs-list {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .logs-header {
            display: grid;
            grid-template-columns: 120px 1fr 200px 150px 120px 100px;
            gap: 15px;
            padding: 15px 20px;
            background: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
            font-weight: bold;
            color: #2c3e50;
        }

        .log-item {
            display: grid;
            grid-template-columns: 120px 1fr 200px 150px 120px 100px;
            gap: 15px;
            padding: 15px 20px;
            border-bottom: 1px solid #f0f0f0;
            transition: background-color 0.2s;
        }

        .log-item:hover {
            background: #f8f9fa;
        }

        .log-item:last-child {
            border-bottom: none;
        }

        .log-time {
            color: #666;
            font-size: 13px;
        }

        .log-type {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
            text-align: center;
        }

        .type-auth { background: #e3f2fd; color: #1976d2; }
        .type-access { background: #f3e5f5; color: #7b1fa2; }
        .type-business { background: #e8f5e8; color: #388e3c; }
        .type-security { background: #ffebee; color: #d32f2f; }

        .log-ip {
            font-family: monospace;
            color: #666;
        }

        .log-country {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .flag-icon {
            width: 16px;
            height: 12px;
            border-radius: 2px;
        }

        .log-device {
            font-size: 13px;
            color: #666;
        }

        .log-actions {
            display: flex;
            gap: 5px;
        }

        .action-btn {
            padding: 4px 8px;
            border: 1px solid #dcdfe6;
            background: white;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
        }

        .action-btn:hover {
            background: #f5f7fa;
        }

        /* 分页 */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            gap: 10px;
        }

        .page-btn {
            padding: 8px 12px;
            border: 1px solid #dcdfe6;
            background: white;
            border-radius: 4px;
            cursor: pointer;
        }

        .page-btn.active {
            background: #3498db;
            color: white;
            border-color: #3498db;
        }

        .page-btn:hover:not(.active) {
            background: #f5f7fa;
        }

        /* 详情模态框 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }

        .modal-content {
            background-color: white;
            margin: 5% auto;
            padding: 0;
            border-radius: 8px;
            width: 90%;
            max-width: 800px;
            max-height: 80vh;
            overflow-y: auto;
        }

        .modal-header {
            padding: 20px;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-body {
            padding: 20px;
        }

        .detail-section {
            margin-bottom: 20px;
        }

        .detail-section h3 {
            margin-bottom: 10px;
            color: #2c3e50;
        }

        .detail-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .detail-item {
            margin-bottom: 10px;
        }

        .detail-label {
            font-weight: bold;
            color: #666;
            margin-bottom: 5px;
        }

        .detail-value {
            color: #2c3e50;
            word-break: break-all;
        }

        /* 响应式设计 */
        @media (max-width: 1200px) {
            .logs-header,
            .log-item {
                grid-template-columns: 100px 1fr 150px 120px 100px 80px;
                gap: 10px;
                padding: 12px 15px;
            }
            
            .charts-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 1024px) {
            .sidebar {
                transform: translateX(-100%);
                transition: transform 0.3s ease;
            }
            
            .sidebar.mobile-open {
                transform: translateX(0);
            }
            
            .content {
                margin-left: 0;
            }
            
            .mobile-overlay {
                display: none;
                position: fixed;
                top: 64px;
                left: 0;
                width: 100%;
                height: calc(100vh - 64px);
                background: rgba(0, 0, 0, 0.5);
                z-index: 998;
            }
            
            .mobile-overlay.active {
                display: block;
            }
        }

        @media (max-width: 768px) {
            .container {
                margin-top: 56px;
                min-height: calc(100vh - 56px);
            }
            
            .sidebar {
                top: 56px;
                height: calc(100vh - 56px);
            }
            
            .content {
                padding: 20px;
            }
            
            .logs-header {
                display: none;
            }
            
            .log-item {
                display: flex;
                flex-direction: column;
                gap: 8px;
                padding: 15px;
            }
            
            .log-item > div {
                display: flex;
                justify-content: space-between;
            }
            
            .log-item > div::before {
                content: attr(data-label);
                font-weight: bold;
                color: #666;
            }
            
            .filter-row {
                flex-direction: column;
            }
            
            .filter-group {
                min-width: 100%;
            }
            
            .charts-grid {
                grid-template-columns: 1fr;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
            .content {
                padding: 15px;
            }
            
            .logs-filter-bar {
                padding: 15px;
            }
            
            .filter-group {
                min-width: 100%;
            }
        }
    </style>
</head>
<body>
    <div id="navbar-container"></div>
    
    <div class="container">
        <div id="sidebar-container"></div>
        
        <main class="content">
            <div class="content-header">
                <h1>日志系统</h1>
                <p>实时监控系统日志和访问记录</p>
            </div>
            
            <div class="logs-container">
                
                <!-- 优化后的筛选栏 -->
                <div class="table-container">
                    <div class="table-header">
                        <h2 class="table-title">日志筛选</h2>
                        <div class="table-filters" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px;">
                            <!-- 时间范围 -->
                            <div class="filter-group" style="grid-column: span 4;">
                                <label class="filter-label" style="font-weight: 600; margin-bottom: 8px; color: #2c3e50;">时间范围</label>
                                <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                                    <button class="quick-date-btn active" onclick="setDateRange('today')" style="background: #3498db; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px;">今日</button>
                                    <button class="quick-date-btn" onclick="setDateRange('yesterday')" style="background: #f8f9fa; border: 1px solid #dcdfe6; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px;">昨日</button>
                                    <button class="quick-date-btn" onclick="setDateRange('7days')" style="background: #f8f9fa; border: 1px solid #dcdfe6; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px;">近7天</button>
                                    <button class="quick-date-btn" onclick="setDateRange('30days')" style="background: #f8f9fa; border: 1px solid #dcdfe6; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px;">近30天</button>
                                </div>
                            </div>
                            
                            <!-- 开始时间 -->
                            <div class="filter-group">
                                <label class="filter-label" style="font-weight: 600; margin-bottom: 8px; color: #2c3e50;">开始时间</label>
                                <input type="datetime-local" id="startTime" class="filter-input" style="width: 100%; padding: 8px 12px; border: 1px solid #dcdfe6; border-radius: 6px; font-size: 14px;">
                            </div>
                            
                            <!-- 结束时间 -->
                            <div class="filter-group">
                                <label class="filter-label" style="font-weight: 600; margin-bottom: 8px; color: #2c3e50;">结束时间</label>
                                <input type="datetime-local" id="endTime" class="filter-input" style="width: 100%; padding: 8px 12px; border: 1px solid #dcdfe6; border-radius: 6px; font-size: 14px;">
                            </div>
                            
                            <!-- 日志类型 -->
                            <div class="filter-group">
                                <label class="filter-label" style="font-weight: 600; margin-bottom: 8px; color: #2c3e50;">日志类型</label>
                                <select id="logType" class="filter-input" style="width: 100%; padding: 8px 12px; border: 1px solid #dcdfe6; border-radius: 6px; font-size: 14px;">
                                    <option value="">全部类型</option>
                                    <option value="auth">用户认证</option>
                                    <option value="access">访问日志</option>
                                    <option value="business">业务日志</option>
                                    <option value="security">安全日志</option>
                                </select>
                            </div>
                            
                            <!-- 关键词搜索 -->
                            <div class="filter-group">
                                <label class="filter-label" style="font-weight: 600; margin-bottom: 8px; color: #2c3e50;">关键词搜索</label>
                                <input type="text" id="keyword" class="filter-input" placeholder="IP地址、用户名、操作内容等" style="width: 100%; padding: 8px 12px; border: 1px solid #dcdfe6; border-radius: 6px; font-size: 14px;">
                            </div>
                            
                            <!-- IP地址 -->
                            <div class="filter-group">
                                <label class="filter-label" style="font-weight: 600; margin-bottom: 8px; color: #2c3e50;">IP地址</label>
                                <input type="text" id="ipAddress" class="filter-input" placeholder="192.168.1.1" style="width: 100%; padding: 8px 12px; border: 1px solid #dcdfe6; border-radius: 6px; font-size: 14px;">
                            </div>
                            
                            <!-- 国家/地区 -->
                            <div class="filter-group">
                                <label class="filter-label" style="font-weight: 600; margin-bottom: 8px; color: #2c3e50;">国家/地区</label>
                                <select id="country" class="filter-input" style="width: 100%; padding: 8px 12px; border: 1px solid #dcdfe6; border-radius: 6px; font-size: 14px;">
                                    <option value="">全部国家</option>
                                    <option value="CN">中国</option>
                                    <option value="US">美国</option>
                                    <option value="JP">日本</option>
                                    <option value="DE">德国</option>
                                </select>
                            </div>
                        </div>
                        
                        <!-- 操作按钮 -->
                        <div class="form-actions" style="display: flex; gap: 12px; justify-content: flex-end;">
                            <button class="btn btn-outline" onclick="clearFilters()" style="display: flex; align-items: center; gap: 6px; padding: 10px 20px; border: 1px solid #dcdfe6; border-radius: 6px; background: white; cursor: pointer; font-size: 14px;">
                                <i class="fas fa-redo" style="font-size: 14px;"></i> 重置
                            </button>
                            <button class="btn btn-outline" onclick="exportLogs()" style="display: flex; align-items: center; gap: 6px; padding: 10px 20px; border: 1px solid #dcdfe6; border-radius: 6px; background: white; cursor: pointer; font-size: 14px;">
                                <i class="fas fa-download" style="font-size: 14px;"></i> 导出
                            </button>
                            <button class="btn btn-primary" onclick="searchLogs()" style="display: flex; align-items: center; gap: 6px; padding: 10px 20px; border: none; border-radius: 6px; background: #3498db; color: white; cursor: pointer; font-size: 14px;">
                                <i class="fas fa-search" style="font-size: 14px;"></i> 搜索
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 统计卡片 - 横向排列 -->
                <div class="stats-grid" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 30px;">
                    <div class="stat-card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                            <span style="font-size: 14px; font-weight: 500;">总日志数量</span>
                            <span style="font-size: 20px;"></span>
                        </div>
                        <div style="display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;">
                            <span style="font-size: 28px; font-weight: 700;">20</span>
                            <span style="font-size: 16px;"></span>
                        </div>
                        <div style="font-size: 13px; opacity: 0.9;">较昨日 +12%</div>
                    </div>
                    
                    <div class="stat-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                            <span style="font-size: 14px; font-weight: 500;">错误日志</span>
                            <span style="font-size: 20px;"></span>
                        </div>
                        <div style="display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;">
                            <span style="font-size: 28px; font-weight: 700;">5</span>
                            <span style="font-size: 16px;"></span>
                        </div>
                        <div style="font-size: 13px; opacity: 0.9;">较昨日 -5%</div>
                    </div>
                    
                    <div class="stat-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                            <span style="font-size: 14px; font-weight: 500;">安全日志</span>
                            <span style="font-size: 20px;"></span>
                        </div>
                        <div style="display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;">
                            <span style="font-size: 28px; font-weight: 700;">6</span>
                            <span style="font-size: 16px;"></span>
                        </div>
                        <div style="font-size: 13px; opacity: 0.9;">较昨日 +8%</div>
                    </div>
                    
                    <div class="stat-card" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); color: #2c3e50; border-radius: 12px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                            <span style="font-size: 14px; font-weight: 500;">今日日志</span>
                            <span style="font-size: 20px;"></span>
                        </div>
                        <div style="display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;">
                            <span style="font-size: 28px; font-weight: 700;">0</span>
                            <span style="font-size: 16px;"></span>
                        </div>
                        <div style="font-size: 13px; opacity: 0.9;">实时更新</div>
                    </div>
                </div>

                <!-- 数据可视化图表 -->
                <div class="chart-section">
                    <div class="chart-header">
                        <h2 class="chart-title">日志分析</h2>
                        <div class="chart-controls">
                            <button class="chart-filter active" onclick="setChartTimeRange('day')">今日</button>
                            <button class="chart-filter" onclick="setChartTimeRange('week')">本周</button>
                            <button class="chart-filter" onclick="setChartTimeRange('month')">本月</button>
                            <button class="chart-filter" onclick="setChartTimeRange('year')">全年</button>
                        </div>
                    </div>
                    <div class="charts-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px;">
                        <div class="chart-container">
                            <div class="chart-title" style="font-size: 16px; font-weight: bold; margin-bottom: 15px; color: #2c3e50;">日志类型分布</div>
                            <div class="chart-wrapper" id="logTypeChart" style="height: 300px;"></div>
                        </div>
                        <div class="chart-container">
                            <div class="chart-title" style="font-size: 16px; font-weight: bold; margin-bottom: 15px; color: #2c3e50;">24小时访问趋势</div>
                            <div class="chart-wrapper" id="hourlyTrendChart" style="height: 300px;"></div>
                        </div>
                        <div class="chart-container">
                            <div class="chart-title" style="font-size: 16px; font-weight: bold; margin-bottom: 15px; color: #2c3e50;">操作状态分布</div>
                            <div class="chart-wrapper" id="statusChart" style="height: 300px;"></div>
                        </div>
                        <div class="chart-container">
                            <div class="chart-title" style="font-size: 16px; font-weight: bold; margin-bottom: 15px; color: #2c3e50;">地理分布热力图</div>
                            <div class="chart-wrapper" id="geoChart" style="height: 300px;"></div>
                        </div>
                        <div class="chart-container">
                            <div class="chart-title" style="font-size: 16px; font-weight: bold; margin-bottom: 15px; color: #2c3e50;">设备类型分布</div>
                            <div class="chart-wrapper" id="deviceChart" style="height: 300px;"></div>
                        </div>
                        <div class="chart-container">
                            <div class="chart-title" style="font-size: 16px; font-weight: bold; margin-bottom: 15px; color: #2c3e50;">错误趋势分析</div>
                            <div class="chart-wrapper" id="errorTrendChart" style="height: 300px;"></div>
                        </div>
                    </div>
                </div>

                <!-- 日志类型标签 -->
                <div class="tabs">
                    <button class="tab-btn active" onclick="switchLogTab('all')">
                        全部日志 <span class="nav-badge" id="all-count">0</span>
                    </button>
                    <button class="tab-btn" onclick="switchLogTab('auth')">
                        用户认证 <span class="nav-badge" id="auth-count">0</span>
                    </button>
                    <button class="tab-btn" onclick="switchLogTab('access')">
                        访问日志 <span class="nav-badge" id="access-count">0</span>
                    </button>
                    <button class="tab-btn" onclick="switchLogTab('business')">
                        业务日志 <span class="nav-badge" id="business-count">0</span>
                    </button>
                    <button class="tab-btn" onclick="switchLogTab('security')">
                        安全日志 <span class="nav-badge" id="security-count">0</span>
                    </button>
                </div>
                
                <!-- 日志列表 -->
                <div class="table-container">
                    <div class="table">
                        <thead>
                            <tr>
                                <th>时间</th>
                                <th>操作内容</th>
                                <th>IP地址</th>
                                <th>国家/地区</th>
                                <th>设备类型</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="logs-container">
                            <!-- 日志内容将通过JavaScript动态加载 -->
                        </tbody>
                    </div>
                </div>
                
                <!-- 分页 -->
                <div class="pagination" id="pagination">
                    <!-- 分页按钮将通过JavaScript动态生成 -->
                </div>
            </div>
        </main>
    </div>

    <!-- 日志详情模态框 -->
    <div id="logDetailModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>日志详情</h2>
                <span class="close" onclick="closeModal()">&times;</span>
            </div>
            <div class="modal-body" id="logDetailContent">
                <!-- 详情内容将通过JavaScript动态加载 -->
            </div>
        </div>
    </div>

    <!-- 模块化加载已在head部分完成 -->
</body>
</html>